<template>
  <div>
    <div class="top_title_icon">
      <i class="el-icon-office-building" style="float: left;padding-right: 10px"></i>
      <span>{{ studioData[0]['studio_name'] }}</span>
    </div>
    <el-divider></el-divider>
    <div>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-carousel interval="5000" height="350" indicator-position="outside">
            <el-carousel-item v-for="item in studioData" :key="item">
              <el-image :src="item.studio_img" class="studio_image"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="12">
          <span class="desc_span">门店地区：{{ this.localArr[0] }}</span><br>
          <span class="desc_span">详细地址：{{ studioData[0]['studio_position'] }}</span><br>
          <span class="desc_span">营业时间：{{ this.timeArr[0] }} - {{ this.timeArr[1] }}</span>
        </el-col>
      </el-row>
    </div>
    <div class="top_title_icon">
      <i class="el-icon-user" style="float: left;padding-right: 10px"></i>
      <span>工作室成员</span>
    </div>
    <el-divider></el-divider>
    <div>
      <el-row :gutter="30">
        <el-col :span="25" v-for="item in memberData" :key="item">
          <el-card :body-style="{ padding: '0px' }" shadow="always">
            <img :src="item['studio_memberImg']" alt="404" class="card_img">
            <div class="el_card_footer_sty">
              <div class="bottom clearfix">
                <el-link @click="" :underline="false" type="default">{{ item['studio_member'] }}</el-link>
              </div>
              <span class="el_card_footer_span_sty">{{ item['studio_belong'] }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="top_title_icon">
      <i class="el-icon-date" style="float: left;padding-right: 10px"></i>
      <span>课程安排</span>
    </div>
    <el-divider></el-divider>
  </div>
</template>

<script>
import studio from "./studio.vue";

export default {
  computed: {
    studio() {
      return studio
    }
  },
  data() {
    return{
      studioData:[],
      memberData:[],
      timeArr:[],
      localArr:[],
    }
  },
  created() {
    this.getStudioInfoById(this.$route.query.id)
  },
  mounted() {
  },
  methods: {
    getStudioInfoById(id) {
      this.$axios.get('api/studio/info/',{
        params:{id:id}
      }).then((response)=>{
        var res = response.data
        if (res['respCode']==='000000'){
          this.studioData = res['list']
          this.timeArr = eval(res['list'][0]['studio_openTime'])
          this.localArr = eval(res['list'][0]['studio_location'])
          this.$axios.get('api/studio/members/info/',{
            params:{studioName:res['list'][0]['studio_name']}
          }).then((res)=>{
            if (res.data['respCode']==='000000'){
              this.memberData = res.data['list']
            }else {
              console.log(res.data['respMsg'])
            }
          })
        }else {
          console.log(res['respMsg'])
        }
      })
    },
  },
}
</script>

<style scoped>
.top_title_icon {
  font-size: 28px;
  font-family: Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  line-height: 28px;
  margin: 20px;
  color: #333
}
.studio_image {
  width: 100%;
  height: 350px;
}
.desc_span {
  font-size: 20px;
  font-family: Arial,Microsoft YaHei,黑体,宋体,sans-serif;
  padding: 10px;
  line-height: 40px;
}
.el-col-25{
  width: 20%;
}
.el-card {
  margin-bottom: 20px;
  border-radius: 20px;
}
.card_flex {
  flex-wrap: wrap;
  flex-direction: row;
}
.el_card_footer_sty {
  background: black;
  padding: 14px;
}
.el_card_footer_span_sty {
  color: white;
  font-size: 10px;
}
.el-link.el-link--default:hover{
  color: #ebb563 !important;
}
.el-link.el-link--default {
  color: white;
  font-size: 15px;
}
.el-divider {
  background-color: #333333;
}
.card_img {
  width: 100%;
  height: 240px;
}
</style>
